<template>
  <div>
    <div id="main" :style="myChartStyle"></div>
    <van-button type="primary" @click="clearAX">主要按钮</van-button>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import mockData from './mockData'
export default {
  name: 'LineChart',
  mounted() {
    this.initChart()
  },
  data() {
    return {
      // Option:null,
      myChartStyle: {height: '400px', width: '100%', backgroundColor: '#fff'}, //图表样式,
      mockData,
      myChart: null,
    }
  },
  methods: {
    getChartData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(mockData)
        }, 1000)
      })
    },
    // clearAX() {
    //   this.myChart.
    // },
    clearAX() {
      // 隐藏 tooltip
      this.myChart.dispatchAction({type: 'hideTip'})
      // 隐藏 axisPointer
      this.myChart.dispatchAction({
        type: 'updateAxisPointer',
        currTrigger: 'leave',
      })
    },
    // ————————————————
    // 版权声明：本文为CSDN博主「天問_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    // 原文链接：https://blog.csdn.net/tiven_/article/details/126395387
    async initChart() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      this.myChart = myChart
      // myChart.on('click', function (params) {
      //   console.log('params', params)
      //   // 判断是否在画布内移动鼠标
      //   // if (params.componentType === 'series') {
      //   //   // 显示 tooltip
      //   //   myChart.dispatchAction({
      //   //     type: 'showTip',
      //   //     seriesIndex: params.seriesIndex,
      //   //     dataIndex: params.dataIndex,
      //   //   })
      //   // }
      // })
      var option

      // let base = +new Date(1988, 9, 3)
      // let oneDay = 24 * 3600 * 1000
      // let data = [[base, Math.random() * 300]]
      // for (let i = 1; i < 20000; i++) {
      //   let now = new Date((base += oneDay))
      //   data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])])
      // }
      // console.log('data', data)
      option = {
        // tooltip: {
        //   triggerOn: 'none', // 关闭默认的mouseover调用
        //   trigger: 'axis',
        //   enterable: true,
        // },
        tooltip: {
          trigger: 'axis',
          // position: [10, 10],
          alwaysShowContent: false,
          // position: function (pt) {
          //   return [pt[0], '10%']
          // },
        },
        // title: {
        //   left: 'center',
        //   text: 'Large Ara Chart',
        // },
        // toolbox: {
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none',
        //     },
        //     restore: {},
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          // type: 'time',
          type: 'category',
          boundaryGap: false,
          triggerEvent: true,
          // axisLine: {
          //   // onZero: false,
          // },
          // axisLabel: {},
          // triggerEvent: false,
        },
        // yAxis: {
        //   type: 'value',
        //   boundaryGap: [0, '100%'],
        // },
        // xAxis: {
        //   type: 'category',
        //   // data: this.xData,
        //   // type:'value',
        //   boundaryGap: false,
        //   axisLine: {
        //     // onZero: false,
        //   },
        //   axisLabel: {},
        //   // triggerEvent: false,
        // },
        yAxis: {
          type: 'value',
          scale: true,
          splitLine: {
            show: false,
          },
          axisLabel: {formatter: '{value}%'},
        },
        dataset: {
          source: [],
        },
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 20,
        //   },
        //   {
        //     start: 0,
        //     end: 20,
        //   },
        // ],
        series: [
          {
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#6cb041',
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
          },
          {
            // name: 'Fake Data',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {},
            // data: this.mockData.curveData,
          },
          {
            // name: 'Fake Data',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {},
            // data: this.mockData.curveData,
          },
        ],
      }
      const res = await this.getChartData()
      option.dataset.source = res.curveData.map((item) => {
        let {date, combination, benchmark, active} = item
        return [date, combination, benchmark, active]
      })
      console.log('option', option)

      option && myChart.setOption(option) // 绑定 mousemove 事件监听器
      myChart.on('click', function (params) {
        var yt = alert('鼠标单击事件,您刚才单击了:' + params.name)

        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))
      })

      // this.getChartData().then((res) => {
      //   option.dataset.source = res.curveData.map((item) => {
      //     let {date, combination, benchmark, active} = item
      //     return [date, combination, benchmark, active]
      //   })
      //   console.log('option', option)

      //   option && myChart.setOption(option) // 绑定 mousemove 事件监听器
      // })
    },
  },
}
</script>
<style lang="less" scoped></style>
